<template>
    <div class="menu" style="flex: 1;">
       <my-div class="wraper">
          <div class="user" @click="push('root:pages/my/personal_center.js')">
          <div  class="user-avatar">
            <image style="100px;height:100px;" :src="avatar" placeholder="root:img/avatar@2x.png"></image>
          </div>
          <div class="username">
            <my-text :text="nickname||current_user.name" style="font-size:36px;"></my-text>

            <text style="width:200px;font-size:24px;color:rgba(154,156,164,1);margin-top:16px;">{{current_wallet.account_id}}</text>
          </div>
        </div>
        <div class="operate">
          <div class="operate-item" @click="turn_in(current_wallet.name)">
            <image  style="width:44px;height:44px;" :src="`root:img/${theme}/home/zhuanru@2x.png`"></image>
            <my-text day_color="rgba(60,71,98,1)" night_color="rgba(206,195,183,1)" :text="$t('trade.coin')" style="font-size:28px;margin-top:16px;"></my-text>
          </div>
          <div class="operate-item" @click="wallet_coin(current_wallet.name)">
            <image style="width:44px;height:44px;" :src="`root:img/${theme}/home/zhuanchu@2x.png`"></image>
            <my-text day_color="rgba(60,71,98,1)" night_color="rgba(206,195,183,1)" :text="$t('trade.point')" style="font-size:28px;margin-top:16px;"></my-text>
          </div>
          <div class="operate-item"  @click="turn_out(current_wallet.name)">
            <image style="width:44px;height:44px;" :src="`root:img/${theme}/home/huazhuan@2x.png`"></image>
            <my-text day_color="rgba(60,71,98,1)" night_color="rgba(206,195,183,1)" :text="$t('trade.transfer')" style="font-size:28px;margin-top:16px;"></my-text>
          </div>
        </div>
        <scroller class="scroller"  :style="{'height':list_height}" :show-scrollbar="false">
          <div class="list-cell" @click="push('root:pages/my/bill_manage.js')">
            <image style="width:30px;height:26px;" :src="`root:img/${theme}/home/account@2x.png`"></image>
            <my-text day_color="rgba(60,71,98,1)" night_color="rgba(187,177,166,1)" :text="$t('trade.account')" style="font-size:28px;margin-left:34px;"></my-text>
          </div>
          <div class="list-cell">
            <image style="width:30px;height:26px;" :src="`root:img/${theme}/home/dingdan_huaban@2x.png`"></image>
            <my-text day_color="rgba(60,71,98,1)" night_color="rgba(187,177,166,1)" :text="$t('trade.order')" style="font-size:28px;margin-left:34px;"></my-text>
          </div>
          <div class="list-cell" @click="push('root:pages/my/safe_center.js')">
            <image style="width:30px;height:26px;" :src="`root:img/${theme}/home/anquan-2@2x.png`"></image>
            <my-text day_color="rgba(60,71,98,1)" night_color="rgba(187,177,166,1)" :text="$t('trade.safety_Center')" style="font-size:28px;margin-left:34px;"></my-text>
          </div>
          <div class="list-cell" @click="push('root:pages/my/locale.js',{page:'root:pages/home/index.js'})">
            <image style="width:30px;height:26px;" :src="`root:img/${theme}/home/yuyan@2x.png`"></image>
            <my-text day_color="rgba(60,71,98,1)" night_color="rgba(187,177,166,1)" :text="$t('trade.language_settings')" style="font-size:28px;margin-left:34px;"></my-text>
          </div>
          <div class="list-cell" @click="push('root:pages/my/about_me.js')">
            <image style="width:30px;height:26px;" :src="`root:img/${theme}/home/wo-@2x.png`"></image>
            <my-text day_color="rgba(60,71,98,1)" night_color="rgba(187,177,166,1)" :text="$t('trade.aboutwe')" style="font-size:28px;margin-left:34px;"></my-text>
          </div>
          <div class="list-cell" @click="toggle_theme">
            <image style="width:30px;height:26px;" :src="`root:img/${theme}/home/tubiaozhizuomoban@2x.png`"></image>
            <my-text day_color="rgba(60,71,98,1)" night_color="rgba(187,177,166,1)" :text="theme_mode" style="font-size:28px;margin-left:34px;" ></my-text>
          </div>
          <div class="list-cell" @click="push('root:pages/wallet/check_zjc.js')">
            <image style="width:30px;height:26px;" :src="`root:img/${theme}/home/beifen-2@2x.png`"></image>
            <my-text day_color="rgba(60,71,98,1)" night_color="rgba(187,177,166,1)" :text="$t('wallet.copy_zjc')" style="font-size:28px;margin-left:34px;"></my-text>
          </div>
          <div class="list-cell" @click="share_invite">
            <image style="width:30px;height:26px;" :src="`root:img/${theme}/home/fenxiang-4@2x.png`"></image>
            <my-text day_color="rgba(60,71,98,1)" night_color="rgba(187,177,166,1)" :text="$t('wallet.share')" style="font-size:28px;margin-left:34px;" ></my-text>
          </div>
        </scroller>
        <div class="set">
          <div class="list-cell">
            <image style="width:30px;height:26px;" :src="`root:img/${theme}/home/shezhi@2x.png`"></image>
            <my-text :text="$t('trade.set')" day_color="rgba(60,71,98,1)" night_color="rgba(187,177,166,1)" style="font-size:30px;margin-left:10px;"></my-text>
          </div>
          <div class="list-cell" @click="logut">
            <image style="width:30px;height:26px;" :src="`root:img/${theme}/home/tuichu@2x.png`"></image>
            <my-text day_color="rgba(60,71,98,1)" night_color="rgba(187,177,166,1)" :text="$t('trade.sign_out')" style="font-size:30px;margin-left:10px;" ></my-text>
          </div>
        </div>
       </my-div>
    </div>
</template>

<style scoped>
.container {
  flex: 1;
  background-color: #ffffff;
}
.wraper{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 500px;
}
.main {
  flex: 1;
  background-color: #ffffff;
}
.menu {
  width: 500;
  flex: 1;
  position: absolute;
  top: 0;
  bottom: 0;
}
.scroller{
  margin-top: 16px;
  margin-left: 35;
  height: 624px;
}
.user-avatar{
  width: 100px;
  margin-left: 35;
  border-radius: 50%;
  background-color: #03A9F4;
}
.user{
  width: 380px;
  margin-top: 146px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.username{
  margin-left: 20px;
}
.operate{
  margin-top: 100px;
  margin-left: 35;
  width: 380px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.operate-item{
  display: flex;
  justify-content: center;
  align-items: center;
}
.list-cell{
  display: flex;
  flex-direction: row;
  margin-top: 50px;
  align-items: center;
}
.set{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 316px;
  height: 80px;
  margin-left: 35;
}
.item {
  color: #ffffff;
  font-size: 40;
}
.item_container {
  height: 60;
  width: 460;
  justify-content: center;
  align-items: center;
  margin-top: 35;
}
.block {
  width: 720;
  height: 350;
  background-color: #FF9800;
  margin: 15;
  border-radius: 15;
}

</style>

<script>
export default{
    data() {
        return {
            nickname:'',
            user_wallets:[],
            txt:'jjjj',
            avatar:'root:img/avatar@2x.png'

        }
    },
    computed: {
        theme_mode(){
            return this.theme === 'day'? this.$t('trade.night_mode'): this.$t('trade.day_mode')
        },
         list_height(){
          return this.getScreenHeight() - 660
        }
    },
    components:{},
    created(){
        var self = this
        let notify=weex.requireModule('notify')
        notify.regist('update_name',(data)=>{
          self.nickname = data.nickname
        })
        notify.regist('update_avatar',(data)=>{
          self.avatar = data.avatar
        })
        if(!this.current_user.avatar){
          this.update_userinfo()
        }else{
          this.avatar = this.current_user.avatar || 'root:img/avatar@2x.png'
        }
        this.nickname = this.current_user.nickname || ''
        this.get_users_wallet()
    },
    methods: {
      toggle_theme:function(){
            let st = weex.requireModule('static')
            const notify=weex.requireModule("notify")
            if(this.theme && this.theme === 'day'){
                this.theme = 'night'
                this.theme_mode = this.$t('trade.day_mode')
                st.setString('theme','night')
                notify.send('themeChange',{theme:'night'})
            }else{
                this.theme = 'day'
                this.theme_mode = this.$t('trade.night_mode')
                st.setString('theme','day')
                notify.send('themeChange',{theme:'day'})

            }
        },
        update_userinfo(){
          this.$http.getSilent('wallet/getUserInfoByAccountId',{account_id:this.current_wallet.account_id},(res)=>{
            this.avatar = res.result.avatar
            this.set_current_user(this.current_user)
          })
        },
        share_invite(){
          this.push('root:pages/my/invite.js')
        },
        get_users_wallet(){
            this.$http.getSilent('wallet/listUserWalletInfo',{accountId:this.current_wallet.account_id},(res)=>{
                this.user_wallets = res.result
            })
        },
         wallet_coin(name,companyName){
          this.push('root:pages/wallet/search_wallet.js',{operate:'coin'})
        //  this.push('root:pages/wallet/coin.js',{name:"AXC",companyName:"AXC",wallet_types:this.user_wallets})
        },
        turn_in(name){
            this.push('root:pages/wallet/transfer.js',{name:'AXC',wallet_types:this.user_wallets})
        },
        turn_out(name){
            this.push('root:pages/wallet/vent.js',{name:'AXC',companyName:'AXC',wallet_types:this.user_wallets})
        },
        // 退出
        logut(){
            this.pref.setString('current_user_key','')
            this.navigator.pushFull({url:'root:pages/login/import.js',animated:true})
        }
    }
}
</script>
